<!DOCTYPE html>
<html>
<head>
    <title>Earth-Moon System Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        // Use a font that supports Chinese characters, with fallbacks.
        const font_large = "30px 'KaiTi', 'SimSun', sans-serif";
        const font_medium = "24px 'KaiTi', 'SimSun', sans-serif";

        // Coordinates and dimensions
        const cy = 220; // Vertical center line for celestial bodies
        const cx_sun = 180;
        const r_sun = 50;
        const cx_earth = 450;
        const r_earth = 25;
        const cx_moon = 650;
        const r_moon = 12;

        // --- Drawing ---

        // 1. Draw connecting lines (drawn first to be in the background)
        
        // Dashed line from Sun to Earth's center
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([10, 8]);
        ctx.moveTo(cx_sun, cy);
        ctx.lineTo(cx_earth, cy);
        ctx.stroke();
        ctx.restore();

        // Solid line from Earth's center to Moon's center
        ctx.beginPath();
        ctx.moveTo(cx_earth, cy);
        ctx.lineTo(cx_moon, cy);
        ctx.stroke();

        // 2. Draw celestial bodies
        
        // Sun
        ctx.beginPath();
        ctx.arc(cx_sun, cy, r_sun, 0, 2 * Math.PI);
        ctx.stroke();

        // Moon
        ctx.beginPath();
        ctx.arc(cx_moon, cy, r_moon, 0, 2 * Math.PI);
        ctx.stroke();

        // Earth (drawn over the lines)
        // First, fill with white to hide the line passing through
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(cx_earth, cy, r_earth, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke(); // Redraw the border
        
        // Earth's center symbol (concentric circle and dot)
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(cx_earth, cy, 10, 0, 2 * Math.PI); // Inner circle
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx_earth, cy, 4, 0, 2 * Math.PI); // Center dot
        ctx.fill();

        // 3. Draw the center of mass 'C'
        // The position is exaggerated for visibility, as it's actually inside Earth.
        const cx_C = cx_earth + 10;
        ctx.beginPath();
        ctx.arc(cx_C, cy, 2.5, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Draw the upward arrow from Earth's center
        const arrow_length = 80;
        const arrow_head_size = 10;
        const arrow_tip_y = cy - arrow_length;
        ctx.beginPath();
        ctx.moveTo(cx_earth, cy);
        ctx.lineTo(cx_earth, arrow_tip_y);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(cx_earth, arrow_tip_y);
        ctx.lineTo(cx_earth - arrow_head_size / 2, arrow_tip_y + arrow_head_size);
        ctx.moveTo(cx_earth, arrow_tip_y);
        ctx.lineTo(cx_earth + arrow_head_size / 2, arrow_tip_y + arrow_head_size);
        ctx.stroke();
        
        // 5. Draw text labels
        ctx.font = font_large;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        
        const label_y_sun = cy + r_sun + 15;
        const label_y_c = cy + r_earth + 15;
        const label_y_earth_moon = label_y_c + 40;
        
        ctx.fillText('太阳', cx_sun, label_y_sun);
        ctx.fillText('C', cx_earth, label_y_c);
        ctx.fillText('地球', cx_earth, label_y_earth_moon);
        ctx.fillText('月球', cx_moon, label_y_earth_moon);
        
        ctx.font = font_medium;
        ctx.fillText('C: 地-月系统质心', canvas.width / 2, 420);

    </script>
</body>
</html>